<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:600px;
				height:500px;
				border:4px solid red;
			}
		</style>
		<script>
			window.onload=function(){
				var btn=document.getElementById("btn");
				var box=document.getElementById("box");
				var title=document.getElementById("title");
				var hs=box.getElementsByTagName('h2');
				btn.onclick=function(){
					//创建标签
					var obj=document.createElement('h2');
					//给新标签加内容
					obj.innerHTML='我是新来的';
					//给新标签添加属性
					obj.setAttribute('class','houdun');
					//将obj追加到box尾部
					box.appendChild(obj);
					//box.appendChild(title);
					//插入标签
					//box.insertBefore(title,hs[2]);
					//删除标签
					//box.removeChild(hs[1]);
					//替换元素
					//box.replaceChild(title,hs[2]);
					//复制节点
					//var newobj=title.cloneNode(true);
				//	box.appendChild(newobj);
				}
			}
		</script>
	</head>
	<body>
		<h1 id='title'>我是h1标签</h1>
		<input type="button" id='btn' value='我是按钮' />
		<div id='box'>
			<h2>后盾人 人人做后盾0</h2>
			<h2>后盾人 人人做后盾1</h2>
			<h2>后盾人 人人做后盾2</h2>
			<h2>后盾人 人人做后盾3</h2>
			<h2>后盾人 人人做后盾4</h2>
		</div>
	</body>
</html>
